<template>
  <div
    class="w-full h-[40px] bg-[#fff] flex justify-between items-center border-b-[1px] border-solid border-[#eee]"
  >
    <div class="flex items-center">
      <div class="w-[50px] text-center text-[14px] text-[#555]">{{ drawIssue }}</div>
      <!-- 开奖倒计时 -->
      <open-time
        v-show="!roomState.locked && !roomState.opened"
        :total-second="lockSecond"
        @finish="lockTimeFinish"
      />
      <open-time
        v-show="roomState.locked && !roomState.opened"
        :total-second="openSecond"
        @finish="openTimeFinish"
      />
      <template v-if="roomState.locked && !roomState.opened">
        <div class="text-[#ff0202] text-[14px] ml-[4px]">封盘中</div>
      </template>
      <template v-if="roomState.opened">
        <div class="text-[#ff8513] text-[14px] ml-[4px]">开奖中</div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { diffTime } from "@/utils/common";

const gameDetail = inject("gameDetail") as ComputedRef<GameTotalMo>;
const roomState = inject<RoomState>("roomState") as RoomState;
const lockSecond = ref(0);
const openSecond = ref(0);

const drawIssue = computed(() => {
  return gameDetail.value.Issue.substr(-5) || "加载中";
});

watchEffect(() => {
  lockSecond.value = !gameDetail.value?.CloseTime ? 0 : diffTime(gameDetail.value.CloseTime);
  openSecond.value = !gameDetail.value?.NextTime ? 0 : diffTime(gameDetail.value.NextTime);
  if (lockSecond.value <= 0) {
    roomState.locked = true;
  } else {
    roomState.locked = false;
  }
  if (openSecond.value <= 0) {
    roomState.opened = true;
  } else {
    roomState.opened = false;
  }
});
const lockTimeFinish = () => {
  roomState.locked = true;
  lockSecond.value = 0;
};

const openTimeFinish = () => {
  roomState.opened = true;
  openSecond.value = 0;
};
</script>
<style lang="scss" scoped>
.button {
  width: 38px;
  height: 26px;
  background-color: var(--primary);
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
